<template>
	<view class="container">
		<view class="phone">
			当前手机号：{{userInfo.mobile}}
		</view>
		<view class="ipt">
			<input type="number" placeholder="请输入新的手机号" v-model="mobile" />
		</view>
		<view class="verify">
			<input type="number" placeholder="请输入验证码" placeholder-style="color: #b3b3b3" v-model="code" />
			<view class="getVerify" @click.stop="getVerify">
				获取验证码
			</view>
		</view>
		<button type="default" @click="submit">确认提交</button>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editMobile,
		getVerify
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				userInfo: {},
				code: '',
				mobile: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.userInfo = uni.getStorageSync('user')
		},
		methods: {
			submit() {
				let data = {
					mobile: this.mobile,
					code: this.code
				}
				editMobile(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '修改手机号成功'
						})
						this.getInfo()
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/user/detail/info'
							})
						}, 500)
					}
				})

			},
			getInfo() {
				getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data
					uni.setStorageSync('user', res.data)
				})
			},
			getVerify() {
				let data = {
					mobile: this.mobile,
					event: 'changemobile'
				}
				getVerify(data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '获取验证码成功'
						})
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.phone {
		text-indent: 30upx;
		height: 80upx;
		line-height: 80upx;
	}

	.ipt {
		width: 100%;
		height: 80upx;
		background-color: #FFFFFF;

		input {
			width: calc(100% - 30upx);
			height: 100%;
			margin-left: 30upx;
		}
	}

	.verify {
		width: 100%;
		height: 90upx;
		margin-top: 20upx;
		// margin: 0 5% 20upx;
		// border: 1upx solid #e9e9e9;
		// border-radius: 50upx;
		background-color: #FFFFFF;
		position: relative;

		input {
			width: calc(100% - 270upx);
			height: 100%;
			margin-left: 30upx;
		}

		.getVerify {
			width: 200upx;
			height: 70upx;
			background-color: #3eb9ff;
			position: absolute;
			right: 30upx;
			top: 10upx;
			border-radius: 35upx;
			color: #fff;
			text-align: center;
			line-height: 70upx;
		}

	}




	button {
		width: 90%;
		height: 90upx;
		margin: 100upx auto;
		color: #FFFFFF;
		border-radius: 45upx;
		line-height: 90upx;
		background-color: #3eb9ff;
	}
</style>
